React Router v6: Modern Web Uygulamaları için Navigasyon Modellerinde Uzmanlaşma

React Router v6, React uygulamaları için güçlü ve esnek bir yönlendirme (routing) kütüphanesidir. Tam sayfa yenilemeleri olmadan navigasyonu yöneterek kusursuz bir kullanıcı deneyimi ile tek sayfa uygulamalar (SPA) oluşturmanıza olanak tanır. Bu blog yazısı, React Router v6 kullanarak temel navigasyon modellerini derinlemesine inceleyecek ve size sağlam ve kullanıcı dostu web uygulamaları oluşturmak için gerekli bilgi ve örnekleri sunacaktır.

React Router v6 Temel Kavramlarını Anlama

Belirli modellere dalmadan önce, bazı temel kavramları gözden geçirelim:

• Bildirimsel Yönlendirme: React Router, rotalarınızı React bileşenleri olarak tanımladığınız bildirimsel bir yaklaşım kullanır. Bu, yönlendirme mantığınızı net ve sürdürülebilir hale getirir.
• Bileşenler: Temel bileşenler arasında BrowserRouter, HashRouter, MemoryRouter, Routes ve Route bulunur.
• Hook'lar: React Router, yönlendirme bilgilerine erişmek ve navigasyonu yönetmek için useNavigate, useLocation, useParams ve useRoutes gibi hook'lar sağlar.

1. <Routes> ve <Route> ile Bildirimsel Yönlendirme

React Router v6'nın temeli bildirimsel yönlendirmeye dayanır. Rotalarınızı <Routes> ve <Route> bileşenlerini kullanarak tanımlarsınız. <Routes> bileşeni rotalarınız için bir kapsayıcı görevi görürken, <Route> bileşeni belirli bir rotayı ve bu rota mevcut URL ile eşleştiğinde oluşturulacak bileşeni tanımlar.

Örnek: Temel Rota Yapılandırması

İşte basit bir uygulama için rotaların nasıl kurulacağına dair temel bir örnek:

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";

function App() {
  return (
    
      
        } />
        } />
        } />
      
    
  );
}

export default App;

Bu örnekte, üç rota tanımlıyoruz:

• /: Home bileşenini oluşturur.
• /about: About bileşenini oluşturur.
• /contact: Contact bileşenini oluşturur.

BrowserRouter bileşeni, tarayıcı geçmişi tabanlı yönlendirmeyi etkinleştirir. React Router, mevcut URL'yi tanımlanan rotalarla eşleştirir ve ilgili bileşeni oluşturur.

2. URL Parametreleri ile Dinamik Yollar

Dinamik yollar, URL'de farklı değerleri işleyebilen rotalar oluşturmanıza olanak tanır. Bu, bir ürün ID'si veya kullanıcı ID'si gibi benzersiz bir tanımlayıcıya dayalı içerik görüntülemek için kullanışlıdır. React Router v6, URL parametrelerini tanımlamak için : sembolünü kullanır.

Örnek: Ürün Detaylarını Görüntüleme

Bir e-ticaret uygulamanız olduğunu ve her ürünün detaylarını ID'sine göre görüntülemek istediğinizi varsayalım. Şöyle bir dinamik rota tanımlayabilirsiniz:

import { BrowserRouter, Routes, Route, useParams } from "react-router-dom";

function ProductDetails() {
  const { productId } = useParams();

  // productId'ye göre ürün detaylarını çek
  // ...

  return (
    

      
Ürün Detayları
      
Ürün ID: {productId}
      {/* Ürün detaylarını burada göster */}
    
  );
}

function App() {
  return (
    
      
        } />
      
    
  );
}

export default App;

Bu örnekte:

• /products/:productId, :productId'nin bir URL parametresi olduğu dinamik bir rota tanımlar.
• useParams hook'u, ProductDetails bileşeni içinde productId parametresinin değerine erişmek için kullanılır.
• Daha sonra productId'yi veri kaynağınızdan ilgili ürün detaylarını çekmek için kullanabilirsiniz.

Uluslararasılaştırma Örneği: Dil Kodlarını Yönetme

Çok dilli bir web sitesi için, dil kodlarını yönetmek üzere dinamik bir rota kullanabilirsiniz:

} />

Bu rota /en/about, /fr/about ve /es/about gibi URL'lerle eşleşir. lang parametresi daha sonra uygun dil kaynaklarını yüklemek için kullanılabilir.

3. useNavigate ile Programatik Navigasyon

Bildirimsel yönlendirme statik bağlantılar için harika olsa da, genellikle kullanıcı eylemlerine veya uygulama mantığına dayalı olarak programatik olarak gezinmeniz gerekir. React Router v6, bu amaçla useNavigate hook'unu sağlar. useNavigate, farklı rotalara gitmenizi sağlayan bir fonksiyon döndürür.

Örnek: Form Gönderiminden Sonra Yönlendirme

Bir form gönderiminiz olduğunu ve form başarıyla gönderildikten sonra kullanıcıyı bir başarı sayfasına yönlendirmek istediğinizi varsayalım:

import { useNavigate } from "react-router-dom";

function MyForm() {
  const navigate = useNavigate();

  const handleSubmit = async (event) => {
    event.preventDefault();

    // Form verilerini gönder
    // ...

    // Başarılı gönderimden sonra başarı sayfasına yönlendir
    navigate("/success");
  };

  return (
    

      {/* Form alanları */}
      Gönder
    
  );
}

export default MyForm;

Bu örnekte:

• navigate fonksiyonunu almak için useNavigate hook'unu kullanıyoruz.
• Form başarıyla gönderildikten sonra, kullanıcıyı /success rotasına yönlendirmek için navigate("/success") fonksiyonunu çağırıyoruz.

Navigasyon Sırasında Durum (State) Aktarma

Ayrıca navigate fonksiyonunun ikinci argümanını kullanarak navigasyonla birlikte durum (state) da aktarabilirsiniz:

navigate("/confirmation", { state: { orderId: "12345" } });

Bu, hedef bileşene veri aktarmanıza olanak tanır ve bu veriye useLocation hook'u kullanılarak erişilebilir.

4. İç İçe Yollar ve Düzenler (Layouts)

İç içe yollar, bir rotanın diğerinin içine yerleştirildiği hiyerarşik yönlendirme yapıları oluşturmanıza olanak tanır. Bu, birden çok navigasyon seviyesine sahip karmaşık uygulamaları düzenlemek için kullanışlıdır. Bu, belirli kullanıcı arayüzü öğelerinin uygulamanın bir bölümünde tutarlı bir şekilde mevcut olduğu düzenler (layouts) oluşturmaya yardımcı olur.

Örnek: Kullanıcı Profili Bölümü

Kullanıcının profil bilgilerini, ayarlarını ve siparişlerini görüntülemek için iç içe yollara sahip bir kullanıcı profili bölümünüz olduğunu varsayalım:

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Profile() {
  return (
    

      
Kullanıcı Profili
      

        

          Profil Bilgileri
        
        

          Ayarlar
        
        

          Siparişler
        
      

      
        } />
        } />
        } />
      
    
  );
}

function ProfileInformation() {
  return 
Profil Bilgileri Bileşeni
;
}

function Settings() {
  return 
Ayarlar Bileşeni
;
}

function Orders() {
  return 
Siparişler Bileşeni
;
}

function App() {
  return (
    
      
        } />
      
    
  );
}

export default App;

Bu örnekte:

• /profile/* rotası, /profile ile başlayan herhangi bir URL ile eşleşir.
• Profile bileşeni, iç içe yolları yönetmek için bir navigasyon menüsü ve bir <Routes> bileşeni oluşturur.
• İç içe yollar, /profile/info, /profile/settings ve /profile/orders için oluşturulacak bileşenleri tanımlar.

Ana rotadaki * işareti çok önemlidir; bu, ana rotanın herhangi bir alt yolla eşleşmesi gerektiğini belirtir ve iç içe yolların Profile bileşeni içinde doğru şekilde eşleşmesini sağlar.

5. "Bulunamadı" (404) Hatalarını Yönetme

Kullanıcının var olmayan bir rotaya gitmesi durumlarını ele almak önemlidir. React Router v6, bunu her şeyi yakalayan bir rota ile kolaylaştırır.

Örnek: Bir 404 Sayfası Uygulama

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function NotFound() {
  return (
    

      
404 - Bulunamadı
      
Aradığınız sayfa mevcut değil.
      Ana sayfaya dön
    
  );
}

function App() {
  return (
    
      
        } />
        } />
        } />
      
    
  );
}

Bu örnekte:

• <Route path="*" element={<NotFound />} /> rotası, tanımlanan diğer rotalardan hiçbiriyle eşleşmeyen herhangi bir URL'yi yakalayan bir rotadır.
• Bu rotayı <Routes> bileşeninin sonuna yerleştirmek önemlidir, böylece yalnızca başka hiçbir rota eşleşmezse eşleşir.

6. React Router v6 ile Veri Yükleme Stratejileri

React Router v6, selefi (React Router v5 ve `useRouteMatch`) gibi yerleşik veri yükleme mekanizmaları içermez. Ancak, çeşitli veri yükleme stratejilerini etkili bir şekilde uygulamak için araçlar sağlar.

Seçenek 1: Bileşenlerde Veri Çekme

En basit yaklaşım, rotayı oluşturan bileşenin içinde doğrudan veri çekmektir. Bileşen yüklendiğinde veya URL parametreleri değiştiğinde veri çekmek için useEffect hook'unu kullanabilirsiniz.

import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";

function ProductDetails() {
  const { productId } = useParams();
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchProduct() {
      try {
        const response = await fetch(`/api/products/${productId}`);
        if (!response.ok) {
          throw new Error(`HTTP hatası! durum: ${response.status}`);
        }
        const data = await response.json();
        setProduct(data);
        setLoading(false);
      } catch (e) {
        setError(e);
        setLoading(false);
      }
    }

    fetchProduct();
  }, [productId]);

  if (loading) return 
Yükleniyor...
;
  if (error) return 
Hata: {error.message}
;
  if (!product) return 
Ürün bulunamadı
;

  return (
    

      
{product.name}
      
{product.description}
    
  );
}

export default ProductDetails;

Bu yaklaşım basittir ancak birden çok bileşende veri çekmeniz gerekiyorsa kod tekrarına yol açabilir. Ayrıca, veri çekme işlemi yalnızca bileşen yüklendikten sonra başladığı için daha az verimlidir.

Seçenek 2: Veri Çekme için Özel bir Hook Kullanma

Kod tekrarını azaltmak için, veri çekme mantığını kapsayan özel bir hook oluşturabilirsiniz. Bu hook daha sonra birden çok bileşende yeniden kullanılabilir.

import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP hatası! durum: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setLoading(false);
      } catch (e) {
        setError(e);
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

Daha sonra, bu hook'u bileşenlerinizde kullanabilirsiniz:

import { useParams } from "react-router-dom";
import useFetch from "./useFetch";

function ProductDetails() {
  const { productId } = useParams();
  const { data: product, loading, error } = useFetch(`/api/products/${productId}`);

  if (loading) return 
Yükleniyor...
;
  if (error) return 
Hata: {error.message}
;
  if (!product) return 
Ürün bulunamadı
;

  return (
    

      
{product.name}
      
{product.description}
    
  );
}

export default ProductDetails;

Seçenek 3: Veri Çekme Yeteneklerine Sahip Bir Yönlendirme Kütüphanesi Kullanma (TanStack Router, Remix)

TanStack Router ve Remix gibi kütüphaneler, yönlendirme ile sorunsuz bir şekilde entegre olan yerleşik veri çekme mekanizmaları sunar. Bu kütüphaneler genellikle şu gibi özellikler sağlar:

• Yükleyiciler (Loaders): Bir rota oluşturulmadan *önce* yürütülen, veri çekmenize ve bileşene aktarmanıza olanak tanıyan fonksiyonlar.
• Eylemler (Actions): Form gönderimlerini ve veri mutasyonlarını yöneten fonksiyonlar.

Böyle bir kütüphane kullanmak, özellikle karmaşık uygulamalar için veri yüklemeyi önemli ölçüde basitleştirebilir ve performansı artırabilir.

Sunucu Taraflı Oluşturma (SSR) ve Statik Site Oluşturma (SSG)

Daha iyi SEO ve ilk yükleme performansı için, Next.js veya Gatsby gibi çerçevelerle SSR veya SSG kullanmayı düşünün. Bu çerçeveler, sunucuda veya derleme zamanında veri çekmenize ve istemciye önceden oluşturulmuş HTML sunmanıza olanak tanır. Bu, istemcinin ilk yüklemede veri çekme ihtiyacını ortadan kaldırarak daha hızlı ve SEO dostu bir deneyim sağlar.

7. Farklı Yönlendirici (Router) Türleriyle Çalışma

React Router v6, çeşitli ortamlara ve kullanım durumlarına uygun farklı yönlendirici uygulamaları sunar:

• BrowserRouter: Navigasyon için HTML5 geçmiş API'sini (pushState, replaceState) kullanır. Bir tarayıcı ortamında çalışan web uygulamaları için en yaygın seçimdir.
• HashRouter: Navigasyon için URL'nin hash kısmını (#) kullanır. Bu, eski tarayıcıları desteklemesi gereken veya HTML5 geçmiş API'sini desteklemeyen sunucularda dağıtılan uygulamalar için kullanışlıdır.
• MemoryRouter: "URL" geçmişinizi bellekte (URL'ler dizisi) tutar. React Native ve test gibi ortamlarda kullanışlıdır.

Uygulamanızın gereksinimlerine ve ortamına en uygun yönlendirici türünü seçin.

Sonuç

React Router v6, React uygulamaları için kapsamlı ve esnek bir yönlendirme çözümü sunar. Bu blog yazısında tartışılan navigasyon modellerini anlayarak ve uygulayarak, sağlam, kullanıcı dostu ve sürdürülebilir web uygulamaları oluşturabilirsiniz. <Routes> ve <Route> ile bildirimsel yönlendirmeden URL parametreleriyle dinamik yollara, useNavigate ile programatik navigasyona ve etkili veri yükleme stratejilerine kadar, React Router v6, kullanıcılarınız için kusursuz navigasyon deneyimleri oluşturmanıza olanak tanır. Daha da fazla kontrol ve performans optimizasyonu için gelişmiş yönlendirme kütüphanelerini ve SSR/SSG çerçevelerini keşfetmeyi düşünün. Bu modelleri özel uygulama gereksinimlerinize uyarlamayı ve her zaman net ve sezgisel bir kullanıcı deneyimine öncelik vermeyi unutmayın.